{{extend './_layouts/home.html'}} {{block 'title'}} {{'in 博客'}} {{/block}} {{block 'body'}}
<!-- container -->
<style type="text/css">
    #aside {
        position: relative;
        float: left;
        max-width: 25%;
        width: 25%;
    }
    
    #gallery-wrapper {
        position: relative;
        float: right;
        max-width: 75%;
        width: 75%;
        /* margin: 50px auto; */
    }
    
    img.thumb {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    .white-panel {
        position: absolute;
        background: white;
        border-radius: 5px;
        box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
        padding: 10px;
    }
    
    .white-panel h1 {
        font-size: 1em;
    }
    
    .white-panel h1 a {
        color: #A92733;
    }
    
    .white-panel:hover {
        box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5);
        margin-top: -5px;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
    }
</style>
<div class="container">
    <section id="aside">
        <div class="categories">
            <div class="cate_title">
                分类
            </div>
            <div class="cate_text">
                <a>23</a>
            </div>
        </div>
    </section>
    </section>
    <section id="gallery-wrapper">
        <article class="white-panel">
            <img src="./public/img/1.jpg" class="thumb">
            <h1><a href="#">Title 1</a></h1>
            <p>Description 1</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/2.jpg" class="thumb">
            <h1><a href="#">Title 2</a></h1>
            <p>Description 2</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/3.jpg" class="thumb">
            <h1><a href="#">Title 3</a></h1>
            <p>Description 3</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/4.jpg" class="thumb">
            <h1><a href="#">Title 4</a></h1>
            <p>Description 4</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/5.jpg" class="thumb">
            <h1><a href="#">Title 5</a></h1>
            <p>Description 5</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/6.jpg" class="thumb">
            <h1><a href="#">Title 6</a></h1>
            <p>Description 6</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/7.jpg" class="thumb">
            <h1><a href="#">Title 7</a></h1>
            <p>Description 7</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/8.jpg" class="thumb">
            <h1><a href="#">Title 8</a></h1>
            <p>Description 8</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/9.jpg" class="thumb">
            <h1><a href="#">Title 9</a></h1>
            <p>Description 9</p>
        </article>
        <article class="white-panel">
            <img src="./public/img/10.jpg" class="thumb">
            <h1><a href="#">Title 10</a></h1>
            <p>Description 10</p>
        </article>
    </section>
    <div class="clearfix"></div>
</div>
<!-- container -->
{{/block}} {{block 'script'}}
<script src="./public/js/pinterest_grid.js"></script>
<script type="text/javascript">
    $(function() {
        $("#gallery-wrapper").pinterest_grid({
            no_columns: 4,
            padding_x: 10,
            padding_y: 10,
            margin_bottom: 50,
            single_column_breakpoint: 700
        });

    });
</script>
<script>
    $.ajax({
        url: '/index',
        type: 'post',
        data: formData,
        dataType: 'json',
        success: function(data) {
            var err_code = data.err_code
            if (err_code === 0) {
                // window.alert('注册成功！')
                // 服务端重定向针对异步请求无效
                window.location.href = '/index'
            } else if (err_code === 1) {
                window.alert('获取文章失败')
            } else if (err_code === 500) {
                window.alert('服务器忙，请稍后重试！')
            }
        }
    })
</script>
{{/block}}